<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <script src="js/jquery/jquery-3.4.1.min.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/zui/1.10.0/css/zui.min.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/zui/1.10.0/lib/jquery/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/zui/1.10.0/js/zui.min.js"></script>
    <script type="text/javascript" src="http://cdn.staticfile.org/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>

</head>
<style>
    .header{
        width: auto;
        height: 80px;
        background-color: lightskyblue;
    }

    .title{
        color: white;
        float: left;
        margin-left: 20px;
    }

    .header:after .content:after{
        clear: both;
    }

    .search {
        width: 100%;
        display: flex;
    }

    .searchTerm {
        width: 100%;
        border: 3px solid #25b6c4;
        border-right: none;
        padding: 5px;
        height: 36px;
        border-radius: 5px 0 0 5px;
        outline: none;
        color: #16e1e1;
    }

    .searchTerm:focus{
        color: #25b6c4;
    }

    .searchButton {
        width: 40px;
        height: 36px;
        border: none;
        background-color: #25b6c4;
        text-align: center;
        /*color: #fff;*/
        border-radius: 0 5px 5px 0;
        cursor: pointer;
        font-size: 20px;
        background-image: url("img/放大镜.png");
        background-size: 35px;
    }

    .wrap{
        width: 40%;
        /*position: absolute;*/
        float: left;
        margin-top: 18px;
        margin-left: 20%;
    }

    /* 下拉按钮样式 */
    .dropbtn {
        background-color: rgba(224, 222, 222, 0.6);
        color: black;
        padding: 16px;
        border: none;
        font-size: 16px;
        cursor: pointer;
        border-radius: 2px;
        width: 159px;
    }


    .dropdown {
        position: relative;
        display: inline-block;
        margin-left: 10%;
        margin-top: 10px;
    }

    /* 下拉内容*/
    .dropdown-content {
        /* 默认隐藏*/
        display: none;
        position: absolute;
        z-index: 100;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    }

    /* 下拉菜单的链接 */
    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }

    /* 鼠标移上去后修改下拉菜单链接颜色 */
    .dropdown-content a:hover {background-color: #f1f1f1}

    /* 在鼠标移上去后显示下拉菜单 */
    .dropdown:hover .dropdown-content {
        display: block;
    }

    /* 下拉内容显示时下拉按钮的颜色需要改变*/
    .dropdown:hover .dropbtn {
        background-color: #82bbee;
    }

    .dropbtn2,.createbnt{
        color: #8a8a8a;!important;
        white-space: pre;
        font-size: 18px;!important;
    }

    .dropbtn2:before{
        content: url("img/排序.png");
    }

    .dropbtn2:after{
        content: url("img/展开.png");
    }

    .createbnt{
        margin-left: 50%;
    }

    .createbnt:before{
        content: url("img/添加收件夹.png");
    }

    .setting,.start,.address{
        border: none;
        background-color: white;
        cursor: pointer;
        float: right;
    }

    .folders-lists{
        margin: 2% 20% auto 10%;
        position: relative;
    }

    .but-img{
        width: 18px;
        height: 18px;
    }

    .page-div{
        display: block;
        margin: 2% auto;
        width: 80%;
    }

</style>
<body>
<div class="main">
    <div class="header">
        <h2 class="title">快速创建收件夹</h2>
        <div class="wrap">
            <div class="search">
                <input list="browsers" type="text" class="searchTerm" placeholder="搜索收件夹的名称" id="searchFold">
                <datalist id="browsers">
                    <div th:each="folder,userStat:${userFolderView.folderList}">
                        <option  th:value="${folder.folderName}"></option>
                    </div>
                </datalist>
                <button type="submit" class="searchButton" onclick="selectFolder()">
                </button>
            </div>
        </div>
        <div class="dropdown">
            <button class="dropbtn">个人中心</button>
            <div class="dropdown-content">
                <a href="/index">返回主页</a>
                <a href="/to_change_password">修改密码</a>
                <a href="/exit">退出登录</a>
            </div>
        </div>
    </div>
    <div class="content">
        <div class="dropdown">
            <button class="dropbtn dropbtn2" th:utext="${userFolderView.getType()}">  创建时间   </button>
            <div class="dropdown-content">
                <a href="#" onclick="sortByType('create')">创建时间</a>
                <a href="#" onclick="sortByType('stop')">截止时间</a>
                <a href="#" onclick="sortByType('nums')">收件数量</a>
                <a href="#" onclick="sortByType('star')">只显示星</a>
            </div>
        </div>
        <button class="dropbtn createbnt" onclick="function createFolder() {
          location.href='driver'
        } createFolder()">创建收件夹</button>
    </div>
    <div class="folders-lists" th:each="folder,userStat:${userFolderView.folderList}">
        <span th:utext="${userStat.index}+1+' '" style="color: #10c4dc"></span>
        <span style="font-size: 22px;color: #6c6a6a;vertical-align: top">
            <a th:href="'/get_folder_all_file?folder_key='+${folder.folderKey}" th:utext="${folder.folderName}" style="text-decoration: none;color: black"></a>
        </span>
        <span th:utext="${folder.getFileNums()}+'件'" style="vertical-align: bottom;font-size: 10px;color: #93a1a1"></span>
        <button type="button" class="btn start" data-toggle="popover"
                data-placement="left" th:id="delete+(${folder.folderKey})" onclick="deleteFolder(this)">
            <img src="img/删除.png" class="but-img"></button>

        <button type="button" class="btn start" data-toggle="popover" data-placement="left"
                th:id="star+(${folder.folderKey})" th:value="${folder.starFlag}" onclick="changeStar(this)">
            <img th:if="${folder.starFlag==1}" th:id="(${folder.folderKey})+star" src="img/收藏.png" class="but-img">
            <img th:if="${folder.starFlag==0}" th:id="(${folder.folderKey})+star" src="img/取消收藏.png" class="but-img">
        </button>

        <button type="button" class="btn start" data-toggle="popover" data-placement="left"
                th:id="open+(${folder.folderKey})" th:value="${folder.openFlag}" onclick="changeOpen(this)">
            <img th:if="${folder.openFlag==1}" th:id="(${folder.folderKey})+open" src="img/开始.png" class="but-img">
            <img th:if="${folder.openFlag==0}" th:id="(${folder.folderKey})+open" src="img/暂停.png" class="but-img">
        </button>

        <button type="button" class="btn setting" data-toggle="popover" data-placement="left"
                title="截止时间" th:id="time+(${folder.folderKey})" th:value="${folder.folderDeadline}">
            <img src="img/时间.png" class="but-img"></button>

        <button type="button" class="btn address" data-toggle="popover" data-placement="left"
                title="收件地址" th:id="(${folder.folderKey})">
            <img src="img/链接.png"></button>
        <img th:if="${folder.overdue == true}" src="img/已结束.png" />
        <img th:if="${folder.overdue == false}" src="img/进行中.png" />
    </div>
    <div id="folder_container"></div>
    <ul class="pager page-div" >
        <li class="previous" th:if="${userFolderView.page}>0"><a href="#" th:onclick="'changePage('+(${userFolderView.page}-1)+')'">上一页</a></li>
<!--        <span style="float: left">-->
        <li class="" th:classappend="${i == userFolderView.page} ? 'active' : '' " th:each="i:${#numbers.sequence(0,(userFolderView.size)-1)}">
                <a href="#" th:onclick="'changePage('+(${i}) + ')'" th:text="${i}+1"></a></li>
<!--        </span>-->
        <li class="next" th:if="${userFolderView.page}<(${userFolderView.size}-1)"><a href="#" th:onclick="'changePage('+(${userFolderView.page}+1)+')'">下一页</a></li>
    </ul>
</div>
</body>
<script>
    $(function () {
        // $('#address').popover()
        // $('#timeBut').popover(
        //     {  content:changeDeadline(),
        //         html:true
        //     }
        // )
        // $('#setting').popover(
        //     {
        //         content:settings(),
        //         html:true
        //     }
        // )

 //       $('.address').popover()
        $('.address').each(function () {
            var key = $(this).attr("id")
            var link = "http://" + window.location.host + "/upload_file?folder_key="+key
            $(this).popover({
                content:setLink(key,link),
                html: true
            })
            $(this).on('shown.zui.popover', function () {
                outputCod(key,link)
            })
        })
        $('.setting').each(function () {
            var butKey = $(this).attr("id")
            var key = butKey.replace("time","")
            var inputKey = key+"time"
            var deadline = $(this).val()
            $(this).popover({
                content:changeDeadline(inputKey,deadline),
                html:true
            })
        })
    })

    function changeDeadline(inputKey,deadline){
        // return '<div><input type="datetime-local" value=""/>' +
        //     '<button id="console" onclick="function f1() {$(\'#timeBut\').popover(\'hide\');} f1()">取消</button>' +
        //     '<button id="sure" onclick="function f2() {$(\'#timeBut\').popover(\'hide\');} f2()">确定</button></div>'
        return '<div><input type="datetime-local" value="'+deadline+'" id="'+inputKey+'"/>' +
            '<button onclick="timeButCancel(this,\''+inputKey+'\')">取消</button>' +
            '<button onclick="timeButOK(this,\''+inputKey+'\')">确定</button></div>'
    }

    function timeButCancel(t,inputKey) {
        var key = inputKey.replace("time","")
        $("#time"+key).popover('hide')
    }

    function timeButOK(t,inputKey) {
        var key = inputKey.replace("time","")
        var deadline = $('#'+inputKey).val()
        var datetime=new Date(deadline).getTime() / 1000
        $.ajax({
            type:"POST",
            data:{key:key,datetime:datetime},
            url:'/change_deadline'
        })
        $("#time"+key).popover('hide')
    }


    function changeStar(t){
        var key = t.id.replace("star", "")
        var imgId = key+"star"
        if (t.value == 1){
            $('#'+imgId).attr("src","img/取消收藏.png")
            t.value = 0
        }else{
            $('#'+imgId).attr("src","img/收藏.png")
            t.value = 1
        }
        var value = t.value
        $.ajax({
            type:"POST",
            data:{key:key,value:value},
            url:'/change_star',
        })
    }

    function changeOpen(t){
        var key = t.id.replace("open", "")
        var imgId = key+"open"
        if (t.value == 1){
            $('#'+imgId).attr("src","img/暂停.png")
            t.value = 0
        }else{
            $('#'+imgId).attr("src","img/开始.png")
            t.value = 1
        }
        var value = t.value
        $.ajax({
            type:"POST",
            data:{key:key,value:value},
            url:'/change_open',
        })
    }

    function deleteFolder(t){
        var key = t.id.replace("delete","")
        $.ajax({
            type:"POST",
            data:{key:key},
            url:'/delete_folder',
            success:function () {
                location.reload()
            }
        })
    }

    function setLink(key,link){
        return '<div style="height: 250px;width: 220px"><div id="qrcode'+key+'"></div><span>'+link+'</span></div>'
    }

    function outputCod(key,txt){
        $('#qrcode'+key).empty();
        console.log($('#qrcode'+key))
        $("#qrcode"+key).qrcode({
            render:"canvas",
            width:200,
            height:200,
            text:txt
        })
    }

    function selectFolder(){
        var select = $("#searchFold").val()
        if(select != ''){
            location.href = "/index?search="+select+"&sort_type="+getQueryString("sort_type")
        }else{
            location.href = "/index?sort_type="+getQueryString("sort_type")
        }
    }

    function getQueryString(name) {
        let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        let r = window.location.search.substr(1).match(reg);
        if (r != null) {
            return decodeURIComponent(r[2]);
        }
        return "";
    }

    function sortByType(t) {
        var search = getQueryString('search')
        if(search == ''){
            location.href = '/index?sort_type='+ t
        }else{
            location.href = '/index?sort_type='+ t + '&search='+search
        }
    }

    function changePage(page) {
        var search = getQueryString('search')
        var sort_type = getQueryString('sort_type')
        var l = new Array()
        if(search!=''){
            l.push('search=' + search)
        }
        if(sort_type != ''){
            l.push('sort_type='+sort_type)
        }
        var url = '/index?'
        for (let i = 0; i < l.length; i++) {
            var param = l.at(i)
            url = url + param + "&"
        }
        url = url + "page=" + page
        location.href = url
    }

</script>
</html>